<template>
  <div class="user_div">
    <!-- 我的藏宝阁 -->
    <!-- 头部组件 -->
    <my-header title="我的藏宝阁" :left="false">
      <span slot="right_icon" class="iconfont icon-youjian gengduo">
        <span class="red_icon"></span>
      </span>
    </my-header>
    <!-- 头像组件 -->
    <my-tour v-if="isRenderHeader" class="my-tour" :user_info="user_info"></my-tour>
    <!-- 功能组件 -->
    <div v-if="my_cbg_data">
      <fun-item class="funItems" v-for="(item) in my_cbg_data" :key="item._id" :itemCount="item.children"></fun-item>
    </div>
    <!-- 退出登陆 -->
    <van-button type="default" class="login_out" v-if="user_info.nickName" @click="login_out">退出登录</van-button>
    <!-- 底部组件 -->
    <my-footer></my-footer>
  </div>
</template>
<script>
import MyHeader from '../common/Header';// 头部组件
import MyTour from "./components/Tour";// 头像组件
import MyFooter from "../common/Footer";// 底部组件
import FunItem from "./components/FunItem";// 功能组件
export default {
  name:"User",
  components: {
    MyHeader,
    MyTour,
    FunItem,
    MyFooter
  },
  created() {
    // 发起网络请求
    this.getUserData();
    // 检查用户是否有token  有token则验证token是否有效 没有token代表未登录
    this.checkTouke();
  },
  data() {
    return {
      my_cbg_data:{},
      user_info:{
        Headpath:"img/user/avatar-cbg.png",
        nickName:""
      },
      // 阻止头像渲染
      isRenderHeader:false
    }
  },
  methods: {
    // 获取 我的藏宝阁 菜单栏
    async getUserData(){
        const {data:res} = await this.$http.get("/getMyCBGData").catch(err => {
        // 请求超时
        this.$message({position:"center",message:"请求超时 服务器未响应"});
        this.$router.push('/neterr');
        return;
      })
      if(!res.isok) return this.$message({position:"center",message:res.message});
      this.my_cbg_data = res.data.my_cbg;
      // console.log(this.my_cbg_data);
    },
    // 检查token
    async checkTouke(){
      this.isRenderHeader = false;
      const {data:res} = await this.$http.post("/checkToken");
      if(res.status == 403){
        window.localStorage.clear("token");
        // 重置数据
        this.user_info = {
          Headpath:"img/user/avatar-cbg.png",
          nickName:""
        }
      }
      if(!res.isok) return this.isRenderHeader = true;// 用户信息未查询到
      // 查询到了 赋值给data
      if(!res.data.Headpath){
        this.user_info = {
          Headpath:"img/user/avatar-cbg.png",
          nickName:"未设置"
        }
      }else{
        this.user_info = res.data;
      }
      
      this.isRenderHeader = true;
    },
    // 退出登录
    login_out(){
      window.localStorage.clear("token")
      this.checkTouke();
    }
  },
  watch: {
    '$route.path':function (val){
      if(val != "/user") return;
      this.checkTouke();
    }
  },
}
</script>
<style lang="less" scoped>
  .gengduo{
    position: relative;
    font-size: 0.2rem;
  }
  .my-tour{
    margin-top: 0.45rem;
  }
  .red_icon{
    right: -0.05rem;
  }
  .funItems{
    margin-top: 0.05rem;
  }
  .user_div{
    font-size: 0rem;
    padding-bottom: 0.48rem;
  }
  .login_out{
    margin-top: 0.05rem;
    display: inline-block;
    width: 100%;
    height: 0.3rem;
    padding: 0.25rem;
    box-sizing: border-box;
    font-size: 0.13rem;
    color: #E74E4B;
    background-color: #ffffff;
  }
</style>